<template>
  <div :class="{ hidden: hidden }" class="oa_pagination_max pagination-container jsb">
    <div class="pagination_box ac mr-28">
      <el-button type="text" v-show="isShowBut('first')" :disabled="currentPage <= 1">
        <i class="iconfont icon-kuaijin-" @click="changePage('first')"></i>
      </el-button>
      <el-button type="text" v-show="isShowBut('prev')" :disabled="currentPage <= 1">
        <i class="iconfont icon-sanjiaoxing2" @click="changePage('prev')"></i>
      </el-button>
      <el-pagination
        ref="ElPagination"
        v-show="isShowBut('jumper')"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="[10, 20, 50, 100, 200, 500]"
        layout="sizes, jumper"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <span class="total_page">共{{ internalPageCount }}页</span>
      <el-button type="text" class="right_but" v-show="isShowBut('next')" :disabled="currentPage == internalPageCount">
        <i class="iconfont icon-sanjiaoxing2" @click="changePage('next')"></i>
      </el-button>
      <el-button class="right_but" type="text" v-show="isShowBut('last')" :disabled="currentPage == internalPageCount">
        <i class="iconfont icon-kuaijin-" @click="changePage('last')"></i>
      </el-button>
      <slot></slot>
    </div>
    <div class="f14">
      <span>共 {{ total }} 条</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number
    },
    page: {
      type: Number,
      default: 1
    },
    limit: {
      type: Number,
      default: 10
    },
    hidden: {
      type: Boolean,
      default: false
    },
    showTips: {
      type: Boolean,
      default: true
    },
    paginationBut: {
      type: String,
      default: 'first,prev,jumper,next,last'
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      }
    },
    currentPageCount() {
      if (!this.total) return 0
      if (this.total == this.pageSize) return this.pageSize
      if (this.currentPage == this.internalPageCount) {
        return this.total % this.pageSize
      } else {
        return this.pageSize
      }
    }
  },
  watch: {
    limit(val) {
      this.$nextTick((s) => {
        this.internalPageCount = this.ElPagination.internalPageCount
      })
    },
    total(val) {
      this.$nextTick((s) => {
        this.internalPageCount = this.ElPagination.internalPageCount
      })
    }
  },
  mounted() {
    this.ElPagination = this.$refs.ElPagination
  },
  data() {
    return {
      internalPageCount: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
    },
    changePage(type) {
      switch (type) {
        case 'first':
          this.ElPagination.handleCurrentChange(1)
          break
        case 'prev':
          this.ElPagination.prev()
          break
        case 'next':
          this.ElPagination.next()
          break
        case 'last':
          this.ElPagination.handleCurrentChange(this.internalPageCount)
          break
      }
      this.internalPageCount = this.ElPagination.internalPageCount
    },
    isShowBut(id) {
      return this.paginationBut.split(',').includes(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  border: 1px solid #b7cfe7;
  background: #eff9ff;
  padding: 8px;
  display: flex;
  align-items: center;
  ::v-deep .el-input__inner {
    min-width: 0;
  }
  .pagination-container.hidden {
    display: none;
  }
  .but_text {
    display: flex;
    align-items: center;
    i {
      margin-right: 6px;
    }
    .el-icon-caret-bottom {
      margin-left: 8px;
      margin-right: -6px;
    }
  }
  .pagination_box {
    .right_but {
      transform: rotate(180deg);
    }
  }
  ::v-deep .el-pagination__jump {
    margin-left: 10px;
  }
  .total_page {
    font-size: 13px;
    margin-right: 10px;
  }
}
</style>
